<template>
	<view class="home-wrap">
		<u-navbar :isBack="false" :background="{background: '#FFFFFF'}" :border-bottom="false" title="首页" height="88">
		</u-navbar>
		<view class="home-top">
			<image
				class="homebg"
				src="../../static/index_bg_top.png" 
				mode="widthFix">
			</image>
			<view class="kaoguan">
				考官 {{user.name ? user.name : ''}}
			</view>

			<view class="zhanghu">
				<image src="../../static/index_icon_1.png"></image>
				<view class="kaohao">{{user.account?user.account:''}}</view>
			</view>

			<view class="kaochang">
				<image src="../../static/index_icon_2.png" style=""></image>
				<view class="changdi">
					{{user.examination_room ? user.examination_room : ''}}
				</view>
			</view>

			<view class="xiangmu">
				<image src="../../static/index_icon_3.png"></image>
				<view class="jineng">
					{{user.major ? user.major : ''}}
				</view>
			</view>
		</view>

		<view class="home-service">
			<image src="../../static/index_btn_examinee.png" mode="widthFix" @click="examinee"></image>
			<image src="../../static/index_btn_comments.png" mode="widthFix" @click="comments"></image>
		</view>

		<view class="home-others">
			<image src="../../static/index_btn_contact.png" mode="widthFix" @click="contact = true"></image>
			<image src="../../static/index_btn_logout.png" mode="widthFix" @click="isLogout = true"></image>
		</view>
		
		<!-- 客服弹窗 -->
		<u-popup v-model="contact" mode="center" borderRadius="30" :zoom="false">
			<view class="kefutc">
				<image class="close" src="../../static/close_ic.png" mode="aspectFill" @click="contact = false"></image>
				<view class="zixun">客服咨询</view>
				<view class="dianhua" @click="copyTel">
					客服电话：{{system ? (system.telephone?system.telephone:'') : ''}}
				</view>
				<image class="sevepic" :src="baseUrl + system.or_code" mode="aspectFill" @click="preCustomerService"></image>
				<view class="erweima">客服微信二维码</view>
			</view>
		</u-popup>
		
		<!-- 退出登录弹窗 -->
		<u-popup v-model="isLogout" mode="center" borderRadius="20" :zoom="false">
			<view class="logout">
				<view class="biaoti">
					<image src="../../static/ic_tips.png" mode="aspectFill"></image>
					<view class="tishi">提示</view>
				</view>
				<view class="neirong">确定退出当前登录吗？</view>
				<view class="hengxian"></view>
				<view class="anniu">
					<view class="quxiao" @click="isLogout=false">取消</view>
					<view class="shuxian"></view>
					<view class="surebtn" @click="confirmLogout">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import wsRequest from '@/common/websocket.js'
	import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		data() {
			return {
				baseUrl: this.$api.baseUrl,
				user: {},
				contact: false,
				system: {},
				isLogout: false,
				identifier: '',
				cmr: {}
			}
		},
		onShow() {
			uni.$auth = this.$auth
			if (this.$auth.isLogin()) {
				this.getUser()
			} else {
				this.$auth.logOut()
				uni.reLaunch({
					url: '../login/login'
				})
			}
			this.getSystem()
		},
		onLoad() {
			if (this.$auth.isLogin()) {
				const wsInit = new wsRequest(2000, this.$auth.token(this.$api.user))
			}
		},
		methods: {
			stop() {
				const systemInfo = uni.getSystemInfoSync()
				uni.request({
					url: `${this.$api.baseUrl}/${this.$api.userClose}`,
					method: 'POST',
					header: {
						'authtoken': this.$auth.token(this.$api.user)
					},
					data: {
						device_id: systemInfo.deviceId
					},
					success(res) {
						console.warn('>>>>>>>>>>>>>>>', res)
					},
					fail(fail) {},
					complete() {}
				})
			},
			async send() {
				const systemInfo = uni.getSystemInfoSync()
				uni.request({
					url: `${this.$api.baseUrl}/${this.$api.userSend}`,
					method: 'POST',
					header: {
						'authtoken': this.$auth.token(this.$api.user)
					},
					data: {
						device_id: systemInfo.deviceId
					},
					success(res) {
						console.warn('>>>>>>>>>>>>>>>', res)
					},
					fail(fail) {},
					complete() {}
				})
			},
			// 获取用户信息
			getUser() {
				let that = this;
				uni.request({
					url: `${that.$api.baseUrl}${that.$api.user}`,
					method: 'POST',
					header: {
						'authtoken': that.$auth.token(that.$api.user)
					},
					success(res) {
						if (res.statusCode == 200 && res.data.code == 1) {
							that.user = res.data.data;
							let user = uni.getStorageSync("user") || {};
							user.data = res.data.data;
							uni.setStorageSync('user', user);
							// const wsSystem = uni.getStorageSync('wsSystem')
							// if (!wsSystem) {
							// 	const wsInit = new wsRequest(2000, that.$auth.token(that.$api.user))
							// 	uni.setStorageSync('wsSystem',1)
							// }
						} else {
							uni.showToast({
								title: res.data.msg || res.errMsg || '获取信息失败',
								icon: 'none',
								mask: true
							});
						}
					},
					fail(fail) {
						uni.showToast({
							title: fail.errMsg || '获取信息失败',
							icon: 'none',
							mask: true
						})
					}
				})
			},
			// 获取客服电话和二维码
			getSystem() {
				let that = this;
				uni.request({
					url: `${that.$api.baseUrl}${that.$api.customer}`,
					method: 'POST',
					success(res) {
						if (res.statusCode == 200 && res.data.code == 1) {
							that.system = res?.data?.data;
						} else {
							uni.showToast({
								title: res.data.msg || res.errMsg || '获取信息失败',
								icon: 'none',
								mask: true
							})
						}
					},
					fail(fail) {
						uni.showToast({
							title: fail.errMsg || '获取信息失败',
							icon: 'none',
							mask: true
						})
					}
				})
			},
			examinee() {
				uni.navigateTo({
					url: '../examinee/examinee'
				})
			},
			comments() {
				uni.navigateTo({
					url: '../comments/comments'
				})
			},
			confirmLogout() {
				// uni.removeStorageSync('user')
				uni.clearStorageSync()
				uni.reLaunch({
					url: '../login/login'
				})
			},
			copyTel() {
				uni.setClipboardData({
					data: this.system.telephone,
					showToast: true
				})
			},
			preCustomerService() {
				let ctx = this
				ctx.contactCustomerService = false
				uni.previewImage({
					current: 0,
					urls: [`${ctx.$api.baseUrl}${ctx.system.or_code}`]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.home-wrap{
	padding: 0 25rpx 0 25rpx;
	.home-top{
		width: 100%;
		position: relative;
		.homebg{
			width: 100%;
			height: auto;
			position: absolute;
			top: 0;
			z-index: -1;
		}
		.kaoguan{
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			padding: 55rpx 0 0 60rpx;
		}
		.zhanghu{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 0 0 60rpx;
			image{
				width: 34rpx;
				height: 29rpx;
			}
			.kaohao{
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				margin-left: 15rpx;
			}
		}
		.kaochang{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 20rpx 0 0 60rpx;
			image{
				width: 34rpx;
				height: 29rpx;
			}
			.changdi{
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				margin-left: 15rpx;
			}
		}
		.xiangmu{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 20rpx 0 0 60rpx;
			image{
				width: 34rpx;
				height: 29rpx;
			}
			.jineng{
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				margin-left: 15rpx;
			}
		}
	}
	.home-service{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 77rpx;
		image{
			flex: 1;
			height: auto;
		}
	}
	.home-others{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 12rpx;
		image{
			flex: 1;
			height: auto;
		}
	}
	.kefutc{
		width: 550rpx;
		height: 680rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.close{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
		.zixun{
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			line-height: 34rpx;
			padding-top: 95rpx;
		}
		.dianhua{
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			padding-top: 33rpx;
		}
		.sevepic{
			width: 300rpx;
			height: 300rpx;
			margin-top: 34rpx;
		}
		.erweima{
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			line-height: 34rpx;
			padding-top: 60rpx;
		}
	}
	.logout{
		width: 600rpx;
		height: 340rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.biaoti{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 22rpx 0 0 25rpx;
			image{
				width: 33rpx;
				height: 33rpx;
			}
			.tishi{
				font-size: 26rpx;
				color: #E93B3D;
				line-height: 26rpx;
				font-weight: bold;
				padding-left: 19rpx;
			}
		}
		.neirong{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
			padding-top: 69rpx;
		}
		.hengxian{
			width: 100%;
			height: 2rpx;
			background-color: #D5D5D5;
			margin-top: 60rpx;
		}
		.anniu{
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 106rpx;
			.quxiao{
				height: 100%;
				flex: 1;
				text-align: center;
				font-size: 32rpx;
				color: #8D8D8D;
				line-height: 106rpx;
			}
			.shuxian{
				width: 2rpx;
				height: 106rpx;
				background-color: #D5D5D5;
			}
			.surebtn{
				height: 100%;
				flex: 1;
				text-align: center;
				font-size: 32rpx;
				color: #333333;
				line-height: 106rpx;
			}
		}
	}
}
</style>